<template>
  <div class="order_mian">
    <div class="order_row">
      <div class="order_wrap">
        <div class="order_table">
          <el-form
            :inline="true"
            size="mini"
            label-width="100px"
            ref="ruleForm"
            :model="queryParams"
            class="demo-form-inline"
          >
            <el-form-item label="订单编号" prop="orderNum">
              <el-input
                      v-model="queryParams.orderNum"
                      placeholder="请输入订单编号"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="订单状态" prop="orderStatus">
              <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable size="small">
                <el-option
                        v-for="dict in dict.type.order_stat"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="下单时间" prop="orderTime">
              <el-date-picker clearable size="small"
                              v-model="queryParams.orderTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择下单时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="展会名称" prop="exhibitionName">
              <el-input
                      v-model="queryParams.exhibitionName"
                      placeholder="请输入展会名称"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="展位编号" prop="standNum">
              <el-input
                      v-model="queryParams.standNum"
                      placeholder="请输入展位编号"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="上传状态" prop="submitStatus">
              <el-select v-model="queryParams.submitStatus" placeholder="请选择上传状态" clearable size="small">
                <el-option
                        v-for="dict in dict.type.upload_stat"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="order_table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="orderNum" label="订单编号"> </el-table-column>
            <el-table-column prop="exhibitionName" label="展会名称"> </el-table-column>
            <el-table-column prop="exNumber" label="展馆号"> </el-table-column>
            <el-table-column prop="stanNum" label="展位号"> </el-table-column>
            <el-table-column prop="orderAmount" label="订单总计"> </el-table-column>
            <el-table-column prop="orderTime" label="下单时间"> </el-table-column>
            <el-table-column label="订单状态"  prop="orderStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.order_stat" :value="scope.row.orderStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="审核状态"  prop="orderStatus">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.apply_status" :value="scope.row.checkStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button @click="hanldpath(scope.row)" type="text">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
                  v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getlist} from '@/api/order.js'
import { getToken, setToken } from "@/utils/auth";
export default {
  dicts: ['order_type', 'order_stat', 'audit_stat', 'upload_stat', 'apply_status'],
  data() {
    return {
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNum: null,
        orderStatus: null,
        orderTime: null,
        exhibitionName: null,
        standNum: null,
        exhibitionCompany: null,
        checkStatus: null,
        submitStatus: null,
      },
      total:0
    };
  },
  created() {
    this.queryParams.exhibitionCompany = getToken("username")

    this.getList();
    this.$emit("hldanpath", 2);
  },
  methods:{
    // 获取表格数据
      getList(){
        getlist(this.queryParams).then(res=>{
          this.tableData = res.rows
          this.total = res.total
        })
      },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("ruleForm");
      this.handleQuery();
    },
      // 查看详情
      hanldpath(row){
          this.$router.push({path:'/orderdetails',query:{
            id:row.orderNum
          }})
      }
  }
};
</script>
<style scoped>
.order_mian {
  background-color: #f2f2f2;
}
.order_row {
  padding: 40px;
}
.order_wrap {
  min-width: 1000px;
  margin: auto;
}
.el-breadcrumb {
  font-size: 18px;
}
.order_table {
  width: 1150px;
  margin: auto;
  background-color: #fff;
  padding: 40px;
  margin-bottom: 30px;
}
/deep/.el-table th.el-table__cell {
  background-color: #f8fcfc !important;
  text-align: center !important;
}
/deep/.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
</style>